<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击按钮，盒子右移</title>
		<!--js无法读取样式表中属性的值 ，只能把样式写成行内样式-->
		<style type="text/css">
			div{
				/*width: 100px;*/
				height: 100px;
				background: yellowgreen;
				margin-top: 10px;
				position: absolute;
				/*left: 20px;*/
			}
		</style>
		<script type="text/javascript">
			//点击按钮，盒子右移
			function fun(){
				//第一步，得到初始值,保存到变量中
				var l= document.getElementById("box").style.left;
				//console.log(l);    //控制台输出20px，string类型 
				
				//第二步，要改初始值 ,得到一个新值
				//new1=parseInt(l)+50;      //控制台输出70
				//new2=parseInt(new1)+"px"; //控制台输出70px
				
				new3=parseInt(l)+50+"px";   //控制台输出70px
				
				//第三步，把新值，再赋回去
				document.getElementById("box").style.left=new3;
				console.log(l); //控制台输出  点一次变一次值效果
			}
		</script>
	</head>
	<body>
		<input type="button"value="点我" onclick="fun()"/>
		<div id="box" style="width: 100px;left: 20px;"></div>
	</body>
</html>
